<template>
  <div class="financial-statements">
    <el-card>
      <template #header>
        <div class="card-header">
          <div class="header-left">
            <span class="text-xl font-bold">财务报表管理</span>
            <el-tag type="info" effect="plain" class="ml-2">{{
              searchForm.type === "daily"
                ? "日报表"
                : searchForm.type === "weekly"
                  ? "周报表"
                  : searchForm.type === "monthly"
                    ? "月报表"
                    : "年报表"
            }}</el-tag>
          </div>
          <div class="header-right">
            <el-button-group>
              <el-button type="primary" @click="generateReport">
                <el-icon><Document /></el-icon>生成报表
              </el-button>
              <el-button type="success" @click="exportData">
                <el-icon><Download /></el-icon>导出数据
              </el-button>
              <el-button type="warning" @click="printReport">
                <el-icon><Printer /></el-icon>打印报表
              </el-button>
            </el-button-group>
          </div>
        </div>
      </template>

      <!-- 搜索栏 -->
      <el-form
        :inline="true"
        :model="searchForm"
        class="search-form bg-gray-50 dark:bg-gray-800 p-4 rounded-lg"
      >
        <el-form-item label="报表类型">
          <el-select
            v-model="searchForm.type"
            placeholder="请选择报表类型"
            class="w-32"
          >
            <el-option label="日报表" value="daily" />
            <el-option label="周报表" value="weekly" />
            <el-option label="月报表" value="monthly" />
            <el-option label="年报表" value="yearly" />
          </el-select>
        </el-form-item>
        <el-form-item label="时间范围">
          <el-date-picker
            v-model="searchForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :shortcuts="dateShortcuts"
            class="w-80"
          />
        </el-form-item>
        <el-form-item label="收入类型">
          <el-select
            v-model="searchForm.incomeType"
            placeholder="请选择收入类型"
            multiple
            collapse-tags
            class="w-48"
          >
            <el-option label="门票收入" value="ticket" />
            <el-option label="酒店收入" value="hotel" />
            <el-option label="套餐收入" value="package" />
            <el-option label="其他收入" value="other" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">
            <el-icon><Search /></el-icon>搜索
          </el-button>
          <el-button @click="resetSearch">
            <el-icon><Refresh /></el-icon>重置
          </el-button>
        </el-form-item>
      </el-form>

      <!-- 统计卡片 -->
      <div class="statistics-cards">
        <el-row :gutter="20">
          <el-col :span="6" v-for="(stat, index) in statistics" :key="index">
            <el-card
              shadow="hover"
              :body-style="{ padding: '20px' }"
              class="stat-card transform hover:scale-105 transition-transform duration-300"
            >
              <template #header>
                <div class="card-header">
                  <span>{{ stat.title }}</span>
                  <el-tag :type="stat.tagType">{{ searchForm.type }}</el-tag>
                </div>
              </template>
              <div class="card-value">
                <span class="currency">¥</span>
                <transition-group name="number">
                  <span
                    v-for="(digit, index) in formatNumber(stat.value).split('')"
                    :key="index + digit"
                    class="digit"
                  >
                    {{ digit }}
                  </span>
                </transition-group>
              </div>
              <div class="card-compare">
                较上期
                <span
                  :class="[
                    'trend-value',
                    stat.growth >= 0 ? 'text-success' : 'text-danger',
                  ]"
                >
                  {{ stat.growth >= 0 ? "+" : "" }}{{ stat.growth }}%
                  <el-icon>
                    <component
                      :is="stat.growth >= 0 ? 'ArrowUp' : 'ArrowDown'"
                    />
                  </el-icon>
                </span>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 图表展示 -->
      <div class="charts-container">
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="chart-wrapper">
              <div class="chart-title">收入支出趋势</div>
              <div class="chart" ref="trendChartRef"></div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="chart-wrapper">
              <div class="chart-title">收入构成</div>
              <div class="chart" ref="pieChartRef"></div>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 数据表格 -->
      <el-table
        v-loading="loading"
        :data="statementList"
        style="width: 100%"
        border
        stripe
        highlight-current-row
        @row-click="handleRowClick"
      >
        <el-table-column type="expand">
          <template #default="props">
            <el-form label-position="left" inline class="table-expand">
              <el-form-item label="创建时间">
                <span>{{ props.row.createTime }}</span>
              </el-form-item>
              <el-form-item label="更新时间">
                <span>{{ props.row.updateTime }}</span>
              </el-form-item>
              <el-form-item label="操作人">
                <span>{{ props.row.operator }}</span>
              </el-form-item>
              <el-form-item label="备注">
                <span>{{ props.row.remark || "无" }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>

        <el-table-column prop="date" label="日期" width="120" sortable>
          <template #default="{ row }">
            <el-tooltip
              :content="row.date + ' ' + row.dayOfWeek"
              placement="top"
              effect="light"
            >
              <span>{{ row.date }}</span>
            </el-tooltip>
          </template>
        </el-table-column>

        <el-table-column prop="totalIncome" label="总收入" width="150" sortable>
          <template #default="{ row }">
            <span class="amount success"
              >¥{{ formatNumber(row.totalIncome) }}</span
            >
          </template>
        </el-table-column>

        <el-table-column
          prop="totalExpense"
          label="总支出"
          width="150"
          sortable
        >
          <template #default="{ row }">
            <span class="amount danger"
              >¥{{ formatNumber(row.totalExpense) }}</span
            >
          </template>
        </el-table-column>

        <el-table-column prop="netProfit" label="净利润" width="150" sortable>
          <template #default="{ row }">
            <span
              :class="['amount', row.netProfit >= 0 ? 'success' : 'danger']"
            >
              {{ row.netProfit >= 0 ? "+" : "" }}¥{{
                formatNumber(row.netProfit)
              }}
            </span>
          </template>
        </el-table-column>

        <el-table-column
          prop="refundAmount"
          label="退款金额"
          width="150"
          sortable
        >
          <template #default="{ row }">
            <el-tooltip
              :content="'退款率: ' + (row.refundRate * 100).toFixed(2) + '%'"
              placement="top"
              effect="light"
            >
              <span class="amount warning"
                >¥{{ formatNumber(row.refundAmount) }}</span
              >
            </el-tooltip>
          </template>
        </el-table-column>

        <el-table-column
          prop="ticketIncome"
          label="门票收入"
          width="150"
          sortable
        >
          <template #default="{ row }">
            <div class="income-cell">
              <span class="amount">¥{{ formatNumber(row.ticketIncome) }}</span>
              <el-progress
                :percentage="
                  getIncomePercentage(row.ticketIncome, row.totalIncome)
                "
                :stroke-width="4"
                :show-text="false"
              />
            </div>
          </template>
        </el-table-column>

        <el-table-column
          prop="hotelIncome"
          label="酒店收入"
          width="150"
          sortable
        >
          <template #default="{ row }">
            <div class="income-cell">
              <span class="amount">¥{{ formatNumber(row.hotelIncome) }}</span>
              <el-progress
                :percentage="
                  getIncomePercentage(row.hotelIncome, row.totalIncome)
                "
                :stroke-width="4"
                :show-text="false"
                status="success"
              />
            </div>
          </template>
        </el-table-column>

        <el-table-column
          prop="packageIncome"
          label="套餐收入"
          width="150"
          sortable
        >
          <template #default="{ row }">
            <div class="income-cell">
              <span class="amount">¥{{ formatNumber(row.packageIncome) }}</span>
              <el-progress
                :percentage="
                  getIncomePercentage(row.packageIncome, row.totalIncome)
                "
                :stroke-width="4"
                :show-text="false"
                status="warning"
              />
            </div>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="180" fixed="right">
          <template #default="{ row }">
            <el-button-group>
              <el-button type="primary" link @click="viewDetail(row)">
                <el-icon><View /></el-icon>详情
              </el-button>
              <el-button type="success" link @click="exportDetail(row)">
                <el-icon><Download /></el-icon>导出
              </el-button>
              <el-button type="warning" link @click="printDetail(row)">
                <el-icon><Printer /></el-icon>打印
              </el-button>
            </el-button-group>
          </template>
        </el-table-column>

        <template #empty>
          <div class="empty-state">
            <el-empty 
              description="暂无报表数据" 
              :image-size="200"
            >
              <div class="empty-text">暂无财务报表数据</div>
              <div class="empty-subtext">生成报表后将在此处显示</div>
            </el-empty>
          </div>
        </template>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 详情对话框 -->
    <el-dialog v-model="detailDialogVisible" title="报表详情" width="800px">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="报表日期">{{
          currentDetail.date
        }}</el-descriptions-item>
        <el-descriptions-item label="报表类型">{{
          getReportTypeLabel(currentDetail.type)
        }}</el-descriptions-item>
        <el-descriptions-item label="总收入"
          >¥{{ currentDetail.totalIncome?.toFixed(2) }}</el-descriptions-item
        >
        <el-descriptions-item label="总支出"
          >¥{{ currentDetail.totalExpense?.toFixed(2) }}</el-descriptions-item
        >
        <el-descriptions-item label="净利润"
          >¥{{ currentDetail.netProfit?.toFixed(2) }}</el-descriptions-item
        >
        <el-descriptions-item label="退款金额"
          >¥{{ currentDetail.refundAmount?.toFixed(2) }}</el-descriptions-item
        >
      </el-descriptions>

      <div class="income-detail mt-4">
        <h4>收入明细</h4>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="门票收入"
            >¥{{ currentDetail.ticketIncome?.toFixed(2) }}</el-descriptions-item
          >
          <el-descriptions-item label="酒店收入"
            >¥{{ currentDetail.hotelIncome?.toFixed(2) }}</el-descriptions-item
          >
          <el-descriptions-item label="套餐收入"
            >¥{{
              currentDetail.packageIncome?.toFixed(2)
            }}</el-descriptions-item
          >
          <el-descriptions-item label="其他收入"
            >¥{{ currentDetail.otherIncome?.toFixed(2) }}</el-descriptions-item
          >
        </el-descriptions>
      </div>

      <div class="expense-detail mt-4">
        <h4>支出明细</h4>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="运营成本"
            >¥{{
              currentDetail.operationCost?.toFixed(2)
            }}</el-descriptions-item
          >
          <el-descriptions-item label="人工成本"
            >¥{{ currentDetail.laborCost?.toFixed(2) }}</el-descriptions-item
          >
          <el-descriptions-item label="市场推广"
            >¥{{
              currentDetail.marketingCost?.toFixed(2)
            }}</el-descriptions-item
          >
          <el-descriptions-item label="其他支出"
            >¥{{ currentDetail.otherExpense?.toFixed(2) }}</el-descriptions-item
          >
        </el-descriptions>
      </div>

      <div class="report-info mt-4">
        <h4>报表信息</h4>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="生成时间">{{
            currentDetail.generateTime
          }}</el-descriptions-item>
          <el-descriptions-item label="生成人员">{{
            currentDetail.generator
          }}</el-descriptions-item>
          <el-descriptions-item label="备注" :span="2">{{
            currentDetail.remark || "无"
          }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import {
  ref,
  reactive,
  onMounted,
  onUnmounted,
  nextTick,
  computed,
  watch,
} from "vue";
import { ElMessage } from "element-plus";
import * as echarts from "echarts";
import { useThemeStore } from "@/stores/theme";
import {
  Document,
  Download,
  Printer,
  Search,
  Refresh,
  ArrowUp,
  ArrowDown,
  View,
} from "@element-plus/icons-vue";

// 图表引用
const trendChartRef = ref(null);
const pieChartRef = ref(null);
let trendChart = null;
let pieChart = null;

// 主题store
const themeStore = useThemeStore();
const isDark = computed(() => themeStore.isDark);

// 销毁并重新创建图表
const recreateCharts = () => {
  // 销毁现有图表
  if (trendChart) {
    trendChart.dispose();
    trendChart = null;
  }
  if (pieChart) {
    pieChart.dispose();
    pieChart = null;
  }

  // 重新初始化图表
  nextTick(() => {
    initTrendChart();
    initPieChart();
  });
};

// 监听主题变化
watch(
  () => isDark.value,
  () => {
    recreateCharts();
  },
);

// 获取主题配置
const getThemeConfig = () => {
  return {
    backgroundColor: isDark.value ? "transparent" : "#ffffff",
    textStyle: {
      color: isDark.value ? "#CFD3DC" : "#333333",
    },
    title: {
      textStyle: {
        color: isDark.value ? "#CFD3DC" : "#333333",
      },
    },
    legend: {
      textStyle: {
        color: isDark.value ? "#CFD3DC" : "#333333",
      },
    },
    tooltip: {
      backgroundColor: isDark.value ? "#1d1e1f" : "#ffffff",
      borderColor: isDark.value ? "#303030" : "#dddddd",
      textStyle: {
        color: isDark.value ? "#CFD3DC" : "#333333",
      },
    },
    xAxis: {
      axisLine: {
        lineStyle: {
          color: isDark.value ? "#484848" : "#E4E7ED",
        },
      },
      axisLabel: {
        color: isDark.value ? "#CFD3DC" : "#333333",
      },
      splitLine: {
        lineStyle: {
          color: isDark.value ? "#484848" : "#E4E7ED",
        },
      },
    },
    yAxis: {
      axisLine: {
        lineStyle: {
          color: isDark.value ? "#484848" : "#E4E7ED",
        },
      },
      axisLabel: {
        color: isDark.value ? "#CFD3DC" : "#333333",
      },
      splitLine: {
        lineStyle: {
          color: isDark.value ? "#484848" : "#E4E7ED",
        },
      },
    },
  };
};

// 初始化趋势图表
const initTrendChart = () => {
  if (!trendChartRef.value) return;

  trendChart = echarts.init(
    trendChartRef.value,
    isDark.value ? "dark" : undefined,
  );
  const option = {
    ...getThemeConfig(),
    title: {
      text: "收入支出趋势",
      subtext: "最近6个月数据",
      left: "center",
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        crossStyle: {
          color: "#999",
        },
      },
    },
    legend: {
      data: ["收入", "支出", "净利润"],
      bottom: "0%",
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "10%",
      top: "15%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: ["1月", "2月", "3月", "4月", "5月", "6月"],
      axisPointer: {
        type: "shadow",
      },
    },
    yAxis: {
      type: "value",
      name: "金额 (元)",
      axisLabel: {
        formatter: "{value} 元",
      },
    },
    series: [
      {
        name: "收入",
        type: "line",
        smooth: true,
        data: [150000, 180000, 220000, 190000, 250000, 280000],
        itemStyle: {
          color: "#67C23A",
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: isDark.value
                ? "rgba(103, 194, 58, 0.3)"
                : "rgba(103, 194, 58, 0.2)",
            },
            {
              offset: 1,
              color: isDark.value
                ? "rgba(103, 194, 58, 0.1)"
                : "rgba(103, 194, 58, 0)",
            },
          ]),
        },
        emphasis: {
          focus: "series",
          blurScope: "coordinateSystem",
        },
        markPoint: {
          data: [
            { type: "max", name: "最大值" },
            { type: "min", name: "最小值" },
          ],
        },
        markLine: {
          data: [{ type: "average", name: "平均值" }],
        },
      },
      {
        name: "支出",
        type: "line",
        smooth: true,
        data: [80000, 95000, 120000, 100000, 140000, 160000],
        itemStyle: {
          color: "#F56C6C",
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: isDark.value
                ? "rgba(245, 108, 108, 0.3)"
                : "rgba(245, 108, 108, 0.2)",
            },
            {
              offset: 1,
              color: isDark.value
                ? "rgba(245, 108, 108, 0.1)"
                : "rgba(245, 108, 108, 0)",
            },
          ]),
        },
        emphasis: {
          focus: "series",
          blurScope: "coordinateSystem",
        },
      },
      {
        name: "净利润",
        type: "line",
        smooth: true,
        data: [70000, 85000, 100000, 90000, 110000, 120000],
        itemStyle: {
          color: "#409EFF",
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: isDark.value
                ? "rgba(64, 158, 255, 0.3)"
                : "rgba(64, 158, 255, 0.2)",
            },
            {
              offset: 1,
              color: isDark.value
                ? "rgba(64, 158, 255, 0.1)"
                : "rgba(64, 158, 255, 0)",
            },
          ]),
        },
        emphasis: {
          focus: "series",
          blurScope: "coordinateSystem",
        },
      },
    ],
    animation: true,
    animationDuration: 2000,
    animationEasing: "cubicInOut",
  };
  trendChart.setOption(option);
};

// 初始化饼图
const initPieChart = () => {
  if (!pieChartRef.value) return;

  pieChart = echarts.init(pieChartRef.value, isDark.value ? "dark" : undefined);
  const option = {
    ...getThemeConfig(),
    title: {
      text: "收入构成",
      subtext: "按收入类型统计",
      left: "center",
    },
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}: {c} ({d}%)",
    },
    legend: {
      orient: "vertical",
      left: "5%",
      top: "middle",
      itemWidth: 10,
      itemHeight: 10,
      icon: "circle",
    },
    series: [
      {
        name: "收入来源",
        type: "pie",
        radius: ["40%", "70%"],
        center: ["60%", "50%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: isDark.value ? "#1d1e1f" : "#ffffff",
          borderWidth: 2,
        },
        label: {
          show: false,
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 20,
            fontWeight: "bold",
            formatter: "{b}\n{c} 元\n{d}%",
          },
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          {
            value: 120000,
            name: "门票收入",
            itemStyle: { color: "#67C23A" },
          },
          {
            value: 80000,
            name: "酒店收入",
            itemStyle: { color: "#409EFF" },
          },
          {
            value: 60000,
            name: "套餐收入",
            itemStyle: { color: "#E6A23C" },
          },
          {
            value: 20000,
            name: "其他收入",
            itemStyle: { color: "#909399" },
          },
        ],
        animationType: "scale",
        animationEasing: "elasticOut",
        animationDelay: function (idx) {
          return Math.random() * 200;
        },
      },
    ],
  };
  pieChart.setOption(option);

  // 添加点击事件
  pieChart.on("click", function (params) {
    ElMessage.info(`${params.name}：${params.value} 元（${params.percent}%）`);
  });
};

// 监听窗口大小变化
const handleResize = () => {
  trendChart?.resize();
  pieChart?.resize();
};

// 组件挂载时初始化
onMounted(async () => {
  await nextTick();
  initTrendChart();
  initPieChart();
  window.addEventListener("resize", handleResize);
});

// 组件卸载时清理
onUnmounted(() => {
  window.removeEventListener("resize", handleResize);
  if (trendChart) {
    trendChart.dispose();
    trendChart = null;
  }
  if (pieChart) {
    pieChart.dispose();
    pieChart = null;
  }
});

// 搜索表单
const searchForm = reactive({
  type: "monthly",
  dateRange: [],
  incomeType: [],
});

// 日期快捷选项
const dateShortcuts = [
  {
    text: "最近一周",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    },
  },
  {
    text: "最近一月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    },
  },
  {
    text: "最近三月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    },
  },
];

// 统计数据
const statistics = reactive([
  {
    title: "总收入",
    value: 128960.5,
    growth: 15.6,
    tagType: "success",
    icon: "money",
  },
  {
    title: "总支出",
    value: 45680.2,
    growth: 8.2,
    tagType: "danger",
    icon: "expenses",
  },
  {
    title: "净利润",
    value: 83280.3,
    growth: 18.9,
    tagType: "primary",
    icon: "profit",
  },
  {
    title: "退款金额",
    value: 3560.8,
    growth: -5.3,
    tagType: "warning",
    icon: "refund",
  },
]);

// 表格数据
const loading = ref(false);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(100);

// 模拟数据
const mockStatementList = [
  {
    date: "2024-03-01",
    dayOfWeek: "星期五",
    totalIncome: 128960.5,
    totalExpense: 45680.2,
    netProfit: 83280.3,
    refundAmount: 3560.8,
    refundRate: 0.0276,
    ticketIncome: 58960.5,
    hotelIncome: 45000.0,
    packageIncome: 25000.0,
    createTime: "2024-03-01 08:00:00",
    updateTime: "2024-03-01 18:00:00",
    operator: "管理员",
    remark: "春节假期收入统计",
  },
];

const statementList = ref(mockStatementList);
const detailDialogVisible = ref(false);
const currentDetail = ref({});

// 搜索处理
const handleSearch = () => {
  loading.value = true;
  // TODO: 调用搜索API
  setTimeout(() => {
    loading.value = false;
  }, 1000);
};

// 重置搜索
const resetSearch = () => {
  searchForm.type = "monthly";
  searchForm.dateRange = [];
  searchForm.incomeType = [];
  handleSearch();
};

// 生成报表
const generateReport = () => {
  // TODO: 实现生成报表逻辑
  ElMessage.success("报表生成成功");
};

// 导出数据
const exportData = () => {
  // TODO: 实现导出逻辑
  ElMessage.success("数据导出成功");
};

// 打印报表
const printReport = () => {
  ElMessage.success("报表打印中...");
  window.print();
};

// 查看详情
const viewDetail = (row) => {
  currentDetail.value = row;
  detailDialogVisible.value = true;
};

// 分页处理
const handleSizeChange = (val) => {
  pageSize.value = val;
  handleSearch();
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
  handleSearch();
};

// 获取报表类型标签
const getReportTypeLabel = (type) => {
  const types = {
    daily: "日报表",
    weekly: "周报表",
    monthly: "月报表",
    yearly: "年报表",
  };
  return types[type] || type;
};

// 格式化数字
const formatNumber = (num) => {
  return num.toLocaleString("zh-CN", {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  });
};

// 计算收入百分比
const getIncomePercentage = (income, total) => {
  if (!total) return 0;
  return Math.round((income / total) * 100);
};

// 行点击处理
const handleRowClick = (row) => {
  console.log("点击行:", row);
};

// 导出详情
const exportDetail = (row) => {
  ElMessage.success(`正在导出 ${row.date} 的财务报表...`);
};

// 打印详情
const printDetail = (row) => {
  ElMessage.success(`正在打印 ${row.date} 的财务报表...`);
};
</script>

<style lang="less" scoped>
.financial-statements {
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .header-left {
      display: flex;
      align-items: center;
    }
  }

  .search-form {
    margin-bottom: 20px;
    border: 1px solid var(--el-border-color-light);
  }

  .statistics-cards {
    margin-bottom: 20px;

    .stat-card {
      background: linear-gradient(
        145deg,
        var(--el-bg-color) 0%,
        var(--el-bg-color-page) 100%
      );
      border: 1px solid var(--el-border-color-light);

      .card-value {
        font-size: 28px;
        font-weight: bold;
        margin: 16px 0;
        color: var(--el-text-color-primary);
        display: flex;
        align-items: center;

        .currency {
          font-size: 20px;
          margin-right: 4px;
          color: var(--el-text-color-secondary);
        }

        .digit {
          display: inline-block;
          transition: all 0.3s ease-in-out;
        }
      }

      .card-compare {
        font-size: 14px;
        color: var(--el-text-color-secondary);
        display: flex;
        align-items: center;
        gap: 4px;

        .trend-value {
          display: flex;
          align-items: center;
          gap: 2px;

          &.text-success {
            color: var(--el-color-success);
          }

          &.text-danger {
            color: var(--el-color-danger);
          }
        }
      }
    }
  }

  .charts-container {
    margin-bottom: 20px;

    .chart-wrapper {
      background: var(--el-bg-color);
      padding: 20px;
      border-radius: 8px;
      box-shadow: var(--el-box-shadow-light);
      transition: transform 0.3s ease;

      &:hover {
        transform: translateY(-5px);
      }

      .chart-title {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 20px;
        color: var(--el-text-color-primary);
      }

      .chart {
        height: 400px;
        border-radius: 4px;
      }
    }
  }

  :deep(.el-table) {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--el-box-shadow-light);

    th {
      background-color: var(--el-bg-color-page);
      font-weight: bold;
    }

    .el-table__row {
      transition: all 0.3s ease;

      &:hover {
        transform: translateX(5px);
      }
    }
  }

  .pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }

  @media print {
    .search-form,
    .el-button-group,
    .pagination-container {
      display: none;
    }
  }
}

.table-expand {
  padding: 20px;
  background-color: var(--el-bg-color-page);

  .el-form-item {
    margin-right: 40px;
    margin-bottom: 0;

    .el-form-item__label {
      color: var(--el-text-color-secondary);
      font-weight: normal;
    }
  }
}

.amount {
  font-family: "Roboto Mono", monospace;
  font-weight: 500;

  &.success {
    color: var(--el-color-success);
  }

  &.danger {
    color: var(--el-color-danger);
  }

  &.warning {
    color: var(--el-color-warning);
  }
}

.income-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;

  .el-progress {
    margin-top: 4px;
  }
}

:deep(.el-table) {
  .el-table__row {
    cursor: pointer;
  }

  .el-table__expand-icon {
    color: var(--el-color-primary);
  }
}

// 数字动画
.number-enter-active,
.number-leave-active {
  transition: all 0.3s ease-in-out;
}
.number-enter-from {
  opacity: 0;
  transform: translateY(20px);
}
.number-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}

/* 空状态样式 */
.empty-state {
  padding: 40px 0;
  text-align: center;
}

.empty-text {
  font-size: 16px;
  color: var(--el-text-color-secondary);
  margin-top: 10px;
}

.empty-subtext {
  font-size: 14px;
  color: var(--el-text-color-placeholder);
  margin-top: 5px;
}

.mt-4 {
  margin-top: 16px;
}
</style>
